<!DOCTYPE html>
<html  ng-app="scotchTodo">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Node/Angular Todo App</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        html{ overflow-y:scroll; }
        body{ padding-top:50px; }
        #todo-list{ margin-bottom:30px; }
    </style>
</head>
<body ng-controller="mainController">
<div class="container">

    <!-- 头部和TODO数量 -->
    <div class="jumbotron text-center">
        <h1>待办列表 <span class="label label-info">{{ todos.length }}</span></h1>
    </div>

    <!-- 代办列表 -->
    <div id="todo-list" class="row">
        <div class="col-sm-4 col-sm-offset-4">

            <!-- 循环 $scope.todos -->
            <div class="checkbox" ng-repeat="todo in todos">
                <label>
                    <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
                </label>
            </div>

        </div>
    </div>

    <!-- 创建TODOS的表单 -->
    <div id="todo-form" class="row">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <form>
                <div class="form-group">

                    <!-- 绑定这个input的值到formData.text-->
                    <input type="text" class="form-control input-lg text-center" placeholder="每天我总会想着做点什么事..." ng-model="formData.text">
                </div>

                <!-- createTodo() 新增一个todo -->
                <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">新增</button>
            </form>
        </div>
    </div>

</div>

<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/core.js"></script>
</body>
</html>